<template>
	<view class="container">
		<view class="cheader">
			<radio-group @change="filetercomment">
				<label>
					<radio value="0" checked="true"></radio> <text>全部</text>
				</label>
				<label>
					<radio value="1"  ></radio> <text>好评</text>
				</label>
				<label>
					<radio value="2" ></radio> <text>中评</text>
				</label>
				<label>
					<radio value="3" ></radio> <text>差评</text>
				</label>
			</radio-group>

		</view>
		<view class="eva-section">
			<view class="e-header">
				<text class="tit">评价列表</text>
				<text>({{totalcomment}})</text>
			 
			</view>
		 
			<view class="eva-box" v-for="(item,index) in commentlist" :key="index">
				<image class="portrait" :src="item.avatar"
					mode="aspectFill"></image>
				<view class="right">
					<text class="name">{{item.nickname}}</text>
					<text class="con">{{item.content}}</text>
					<view class="bot">
						<text class="attr">购买类型：{{item.specvalue}}</text>
						<text class="time">2019-04-01 19:21</text>
					</view>
				</view>
			</view>
<uni-load-more :status="loadingType"></uni-load-more>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				product_id:0,
				comment_level:0,
				commentlist:[],
				page: 1,
				totalcomment:0,
				loadingType: 'more', //加载更多状态
			}
		},
			onLoad(options) {
				this.product_id = options.product_id;
				this.getCommentlist();
			},
		methods: {
			filetercomment(e){
				console.log(e.target.value);
			  this.comment_level=e.target.value;
			  this.page=1;
			  this.getCommentlist();
			},
           getCommentlist:function(){
			     
				let params={
					comment_level:this.comment_level,
					product_id:this.product_id,
					pagesize:5,
					page:this.page
				}
				let that = this;
			  this.$util.req('/comment/getList',params,false,function(res){
				  let datalist = res.data.list;
				  that.totalcomment= res.data.totalrow;
				 that.loadingType = datalist.length >= 5 ? 'more' : 'nomore';
				  datalist.forEach(item=>{
					  if(item.specvalue){
						  item.specvalue=item.specvalue.join(",");
						  item.createtime_text = that.$util.timestamp2date(item.createtime);
					  }
					    
				  })
				  that.commentlist = datalist;
			  });
		   },
		   //加载更多
		   onReachBottom() {
			if(this.loadingType=="more"){
				  	this.getCommentlist();
		          this.page +=1; 
				  console.log(this.page)
			}
		  
		   },
		}
	}
</script>

<style lang="scss">
	.container{

		padding: 20upx 30upx;
		padding-top: 35px;
	}
	.eva-section {
		display: flex;
		flex-direction: column;
		padding: 20upx 30upx;
		background: #fff;
		margin-top: 16upx;

		.e-header {
			display: flex;
			align-items: center;
			height: 70upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;

			.tit {
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				margin-right: 4upx;
			}

			.tip {
				flex: 1;
				text-align: right;
			}

			.icon-you {
				margin-left: 10upx;
			}
		}
	}

	.eva-box {
		display: flex;
		padding: 20upx 0;

		.portrait {
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			border-radius: 100px;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-base;
			color: $font-color-base;
			padding-left: 26upx;

			.con {
				font-size: $font-base;
				color: $font-color-dark;
				padding: 20upx 0;
			}

			.bot {
				display: flex;
				justify-content: space-between;
				font-size: $font-sm;
				color: $font-color-light;
			}
		}
	}
</style>
